<template>
  <xtx-dialog
    class="xtx-confirm"
    :visible.sync="visibleDialog"
    @on-cancel="close"
    @on-submit="confirm"
    :title="title"
    width="400px"
    submitText='确认'
  >
    <span class="iconfont icon-warning"></span> {{text}}
  </xtx-dialog>
</template>

<script>
import XtxDialog from './xtx-dialog'
export default {
  name: 'xtx-confirm',
  components: { XtxDialog },
  data () {
    return {
      visibleDialog: false,
      text: '',
      title: '温馨提示'
    }
  },
  methods: {
    open () {
      this.visibleDialog = true
    },
    close () {
      this.visibleDialog = false
      this.$emit('on-cancel')
    },
    confirm () {
      this.visibleDialog = false
      this.$emit('on-submit')
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-confirm {
  .icon-warning {
    font-size: 18px;
    color: @fuzuColor;
  }
  ::v-deep > .new-box {
    font-size: 16px;
    > .title {
      height: 50px;
      line-height: 50px;
      border-bottom: none;
    }
    > .close {
      top: 5px;
      right: 5px;
    }
    .xtx-common-btn {
      width: 60px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }
    > .body {
      padding: 20px 40px;
    }
    > .footer {
      padding-bottom: 10px;
      text-align: right;
      padding-right: 10px;
    }
  }
}
</style>
